<template>
  <c-back-wrap :loading="loading" go-page="经销商分店关店管理" current-page="详情">
    <c-title title="经销商-客户基本信息">
      <CustomerBaseInfoView :detail="detail" />
    </c-title>
    <c-title title="经销商-待关闭门店选择">
      <ChangeTable :table-data="changeTableData" type="view" />
    </c-title>
    <c-title title="经销商-关闭门店信息">
      <!-- <el-collapse v-model="activeName"> -->
      <c-collapse-item v-for="(d,i) in changeResultTableData" :key="i" :name="i+1">
        <div slot="title" class="change-table-title">
          <span>{{ d.code }}</span>
          <span>{{ d.name }}</span>
          <span>{{ d.shopAddr }}</span>
        </div>
        <QupList :column="3" sep="：" default-value="" label-position="right" label-width="130">
          <QupListItem label="门店是否交接" :value="d.isMarketConnect" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" :span="24" />
          <QupListItem label="关店原因" :value="d.closeReason" :span="24" />
          <QupListItem label="关店附件" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="d.id" view-type="list" type-code="ACCESS069" />
          </QupListItem>
          <QupListItem v-if="[1,'1'].includes(d.isMarketConnect)" label="交接证明" :span="24">
            <c-file-list :uploadable="false" :editable="false" :model-id="d.id" view-type="list" type-code="ACCESS070" />
          </QupListItem>
        </QupList>
      </c-collapse-item>
      <!-- </el-collapse> -->
    </c-title>
    <c-title v-if="!NoIsMarketConnect" title="经销商-销售转让信息">
      <QupList :column="1" sep="：" default-value="" label-position="right" label-width="130">
        <QupListItem label="是否涉及销量转让" :value="detail.isTransferSales" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" :span="24" />
        <QupListItem label="关系证明附件" :span="24">
          <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS071" />
        </QupListItem>
        <QupListItem label="交接双方现场签订照片" label-width="160px" :span="24">
          <c-file-list :uploadable="false" :editable="false" :model-id="id" view-type="list" type-code="ACCESS111" />
        </QupListItem>
      </QupList>
    </c-title>
    <c-title title="经销商-客户业务类型变更信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="140">
        <QupListItem label="是否变更客户业务类型" :value="detail.isChangeBusinessType" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="调整后业务类型" :value="detail.afterBusinessTypeName" />
        <QupListItem label="是否取消业务账号" :value="detail.isChangeAccount" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem label="账号编码" :value="detail.accountCode" />
        <QupListItem label="账号名称" :value="detail.accountName" />
        <QupListItem label="账号类型" :value="detail.accountTypeName" dict-type-code="BOOLEANS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
      </QupList>
    </c-title>
    <c-title title="BPM审核信息">
      <QupList :column="3" sep="：" default-value="" label-position="right" label-width="140">
        <QupListItem label="变更进度" :value="detail.schedule" dict-type-code="CTM_CUS_ARCHIVE_CHANGE_PROGRESS" :prop-enum="{domainCode:'marketing',appCode:'slm'}" />
        <QupListItem :value="detail.createTime" label="申请时间" />
        <QupListItem :value="detail.applyNo" label="BPM单号" />
        <!-- <QupListItem label="档案科审核结果" :value="detail.fileReviewResult" dict-type-code="REVIEW_RESULT" :prop-enum="{domainCode:'marketing',appCode:'slm'}" /> -->
        <!-- <QupListItem :value="detail.fileReviewTime" label="档案科审核时间" /> -->
        <!-- <QupListItem :value="detail.fileReviewAdvice" label="档案科审核意见" :span="24" /> -->
        <!-- <QupListItem :value="detail.authorityReviewTime" label="系统权限处理审核时间" /> -->
        <!-- <QupListItem :value="detail.authorityReviewAdvice" label="系统权限处理审核意见" :span="24" /> -->
      </QupList>
      <Options :data="detail.opinionDTOS" />
    </c-title>

    <div class="btn-center">
      <c-button type="primary" @click="handleGoBack">返回</c-button>
    </div>
  </c-back-wrap>
</template>
<script>
import { shopCloseDetail } from '@/api/channelTask2/shutUpShop'
import ChangeTable from '../../components/ChangeTable'
import CustomerBaseInfoView from '../../components/CustomerBaseInfoView'
import Options from '../../components/Options'

export default {
  name: 'Detail',
  components: {
    ChangeTable,
    CustomerBaseInfoView,
    Options
  },
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      changeTableData: [],
      changeResultTableData: [],
      activeName: 1
    }
  },
  computed: {
    // 所有门店是否交接为否
    NoIsMarketConnect() {
      return this.changeResultTableData.length > 0 && this.changeResultTableData.every(e => ![1, '1'].includes(e.isMarketConnect))
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      this.loading = true
      return shopCloseDetail(this.id).then(res => {
        this.detail = res.data
        this.changeTableData = this.detail.shopBusinessDTOS
        this.changeResultTableData = this.detail.shopBusinessDTOS.filter(e => [1, '1'].includes(e.isChange))
      }).finally(() => {
        this.loading = false
      })
    },
    handleGoBack() {
      this.$pageStack.pop()
    }
  }
}
</script>
<style lang="scss" scoped>
.change-table-title{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  &>span{
    color: #333;
    font-size: 16px;
    font-weight: 600;
    margin-right: 10px;
  }
}
</style>
